<template>
    <el-form
      ref="loginForm"
      :model="smsFormData"
      status-icon
      :rules="smsRules"
      label-width="120px"
      class="demo-smsFormData"
    >
    <!-- 输入手机号 -->
    <el-form-item label="手机号" prop="phone" class="captcha-form-item">
        <el-input v-model="smsFormData.phone" maxlength="11" />
        <div @click="sendSms" class="imgcaptcha">{{desc}}</div>
      </el-form-item>
      <!-- 输入验证码 -->
      <el-form-item label="验证码" prop="code" class="password-form-item">
        <el-input
          v-model="smsFormData.code"
          type="text"
          autocomplete="off"
          maxlength="5"
        />
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="submitForm(loginForm)">提交</el-button>
      </el-form-item>
    </el-form>
</template>
<script setup>
//引入接口
import * as api from "@/api/users.js"
import { runInContext } from "lodash";
  import { reactive, ref,onUnmounted } from 'vue'
  //引入校验函数
  import {smsRules,useSubmitForm} from "../../composition/login/validate"
  //引入element中的消息提示组件
  import { ElMessage } from 'element-plus'
  //引入loading加载框
  import { ElLoading } from 'element-plus'
   //引入store
   import {useUser} from "@/store/users"
  //引入路由对象
  import {useRouter} from "vue-router"

  let router=useRouter();
   //使用store
   let userStore=useUser()
  const loginForm = ref()
  //表单校验成功之后，回调的方法
  let validateSuccess= async ()=>{
     console.log('校验成功')
     //发起登入请求的时候就要加载loading加载动画框
     let loadingInstance=ElLoading.service({
      text:'正在登入...',
       background:'rgba(0,0,0,.4)'
  })
     //发送短信登入的请求
     try{
         let res=await api.smsApi(smsFormData.code)
         //关闭loading加载动画框
         loadingInstance.close()
        //  console.log(res)
         //存储token,存到sessionStorage中
          sessionStorage.setItem("myx-token",res.data.token)
          //存储用户信息
         userStore.$patch({
          userInfo:res.data.userInfo
         })
         //页面要跳转
         router.push("/")
     }catch(e){
         console.log(e)
         //登入失败，也要关闭loading动画
         loadingInstance.close()
     }
}
// onUnmounted(()=>{
//   console.log('组件被卸载了')
//    //关闭Loading加载动画框
//   loadingInstance && loadingInstance.close()
// })
//表单校验失败，回调的方法
let validateFailed=()=>{
     console.log('校验失败')
}
  //使用submitForm
  let submitForm=useSubmitForm(validateSuccess,validateFailed)
//注入到表单的数据
  const smsFormData = reactive({
    phone: '',
    code: ''
  })
  //声明一个响应式变量，改变按钮中间的文字
  let desc=ref('点击发送')
  //引用定时器，便于组件卸载的时候，清除定时器
  let timeDownInterval=null
  //处理用户频繁点击的问题
  //应用开关的思路
  let isClick=false
  let sendSms=async ()=>{
    if(!isClick){
 
    //发起获取短信验证码的请求
    try{
      let res=await api.getSmsCode(smsFormData.phone)
      // 给消息提示
      ElMessage({
        message: '短信验证码发送成功',
        type: 'success',
      })
      console.log(res)
      //调用倒计时函数
      timeDownInterval=timeDown(10,desc,'秒后重新发送',desc.value,()=>{
      //让点击状态isClick恢复到未点击
      isClick=false
    })
    }catch(e){
      // console.log(e)
      //将按钮的开关重置
      isClick=false
      ElMessage({
      message: e,
      type: 'error',
  })
      return
    }
    }
   //标记isClick已经被点击了
  isClick=true
  }
  
  //短信倒计时的方法
  /**
   * 
   * @param {number} timer 倒计时的时间 
   * @param {object} param 需要变更的响应式变量
   * @param {String} msg 倒计时秒数的文字
   * @param {String} endMsg 倒计时结束之后，回显的文字
   * @param {Function} cd 倒计时结束之后回调的函数
   */
  //字符串.padStart('希望几位数'，"用什么字符去补")
  let timeDown=(timer=5,param,msg,endMsg,cd)=>{
    //实现思路，核心就是间隔定时器
    let count=timer
    //一调用倒计时函数，就要显示倒计时的秒数
    param.value=(count+"").padStart(2,0)+msg
    let interval=setInterval(()=>{
        count--
       console.log(11)
        if(count<=0){
          //清除定时器
          clearInterval(interval)
          //倒计时结束
          param.value=endMsg
          //回调传入的函数
          cd && cd()
          return
        }
        param.value=(count+"").padStart(2,0)+msg
    },1000)
    //返回定时器的引用
    return interval
  }
  //组件卸载的钩子
  onUnmounted(()=>{
    //卸载定时器
    //如果定时器存在，组件卸载的时候也需要清除定时器
    //关闭Loading加载动画框
  
    if(timeDownInterval) clearInterval(timeDownInterval)
  })
  </script>
  <style scoped>
  .imgcaptcha{
    color: rgb(59, 57, 57);
  }
  
</style>